---
import Card from "#/components/Card.astro"
import ContainedSection from "#/components/ContainedSection.astro"
import AnimationLayout from "#/layouts/AnimationLayout.astro"
import { contentfulClient } from "#/lib/contentful/client.ts"
import type { BlogPost } from "#/lib/types.ts"

export const prerender = false

const blogEntries = await contentfulClient.getEntries<BlogPost>({
  content_type: "blog",
  // @ts-expect-error
  order: "-fields.date",
  limit: 100, // max limit
})

const publishedBlogPosts = blogEntries.items.filter(entry =>
  import.meta.env.MODE === "production" ? entry.fields.hidden !== true : true
) as unknown as Array<BlogPost>

// The browser should always check freshness
Astro.response.headers.set("cache-control", "public, max-age=0, must-revalidate")

const imageWithProtocol = (url: string) => `https:${url}`
---

<AnimationLayout
  title="Blog"
  text="Stay updated on our progress."
>
  <ContainedSection
    grid
    className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
  >
    {
      publishedBlogPosts.map((blogPostEntry: BlogPost) => (
        <a
          class="pointer-cursor"
          href={`/blog/${blogPostEntry.fields.slug}`}
        >
          <Card
            hoverScale
            class="group size-full rounded-tl-[2rem] overflow-hidden"
          >
            <div>
              <img
                class="transition w-full h-full object-cover border-none"
                loading="eager"
                alt={blogPostEntry.fields.cover.fields.title}
                src={`${
                  imageWithProtocol(blogPostEntry.fields.cover.fields.file.url)
                }?fit=fill&f=center&fm=avif&w=1344&h=706`}
              />
            </div>
            <div class="flex flex-col gap-2 p-4">
              <h2 class="font-supermolot uppercase font-bold text-xl">
                {blogPostEntry.fields.title}
              </h2>
              <p class="text-base text-neutral-200 font-mono">
                {blogPostEntry.fields.description}
              </p>
            </div>
          </Card>
        </a>
      ))
    }
  </ContainedSection>
</AnimationLayout>

<style is:inline>
*::selection {
  background-color: #a0ecfd;
  color: #000;
}
.card-rounded {
  border-top-left-radius: 0 50%;
  overflow: hidden;
}
</style>
